<template>
	<div>
		
 		<div v-show="isLoading"  class="loadingOverlay">
			<span style="color: aliceblue;">{{loadingMessage}}</span>
		</div> 
		<div class="editor-shrink-btn" v-show="isFullScreen">
			<button   @click="onClickForShrinkBtn" :class="shrinkBtnCss"></button>
		</div>
		
		<UEPlayer @initCompleted="initCompleted" />
		<div>
			<APINavForUE ref="apiNavForUE" @handleClick="handleApiNavClick" />
		</div>

		<div >
			<CodeEditor ref="codeEditor" />
		</div>
	</div>
</template>

<script setup lang="ts">
	
	declare function CloudRender():Object;
	
	import UEPlayer from "@/components/UEPlayer/index.vue"
	import APINavForUE from "./components/APINavForUE.vue"
	import CodeEditor from "./components/CodeEditor.vue"
	import {useRouter} from 'vue-router'
	const isLoading=ref(false)
	const loadingMessage=ref('')
	const isFullScreen=ref(false)
	const codeEditor=ref()
	const apiNavForUE=ref()
	
	const { currentRoute } = useRouter();
	const route = currentRoute.value;
	
	const initCompleted = () => {
		if(window.cloudRender){
			window.cloudRender.call("RegisterCloudResponse", function(data){
				codeEditor.value.addLog(data);
			})
		}

	}
	
	const shrinkBtnCss=ref('shrink-btn')
	const onClickForShrinkBtn = (event) => {
		if(shrinkBtnCss.value=='shrink-btn'){
			shrinkBtnCss.value='shrink-btn active';
			codeEditor.value.show(false);
			apiNavForUE.value.show(false);
		}else{
			shrinkBtnCss.value='shrink-btn';
			codeEditor.value.show(true);
			apiNavForUE.value.show(true);
		}
	}
	
	const init=(cloudurl,appid)=> {
		Promise.race([
			fetch(`${cloudurl}/render/api/order`, {
				method: "POST",
				headers: { "Content-type": "application/json" },
				body: JSON.stringify({appid:appid, resX:window.innerWidth, resY:window.innerHeight})
			}),
		    new Promise(function(resolve,reject){
		        setTimeout(()=> reject(new Error('request timeout')),1000*10)
		    })])
		    .then((res)=>{
				if (!res.ok) { throw Error(res.statusText) }
				return res.json()
		    }).then(res => {
				if (res.code!=200) { throw Error(res.message) }
				return res.result
			}).then(data =>{
				// var cloudRender=new CloudRender();
				// cloudRender.call("RegisterCloudResponse", function(data){
				// 	codeEditor.value.addLog(data);
				// })
				// window.cloudRender=cloudRender;
				
				// cloudRender.call("StartRenderCloud", data);
				//initCompleted(cloudRender);
				//codeEditor.value.show(true);
				apiNavForUE.value.show(true);
				isLoading.value=false;
			}).catch((e)=>{
				console.log(e)
				ElMessage.error(e)
		});
	}
	
	const handleApiNavClick=(e)=>{
		if(!window.cloudRender){
			  ElMessage({
			    message: '渲染服务未运行.',
			    type: 'warning',
			  })
		}
		
		isFullScreen.value=true;
		codeEditor.value.show(true);
		codeEditor.value.clearLogs();
		codeEditor.value.setCode(e);
		codeEditor.value.clearLogs();
		if(window.cloudRender){
			window.cloudRender.call("ClearAllRegisterCloudResponse");
			initCompleted();
		}
		
		
	}
	
	onMounted(() => {
		//init(route.query.url,route.query.appid);
		isLoading.value=false;
		 var cloudRender=new CloudRender();
		 window.cloudRender=cloudRender;
		 
		 cloudRender.call("OnRenderConnecting",(e)=>{
			console.log("%c[OnRenderConnecting]", "background: pink; color: black", e);
			apiNavForUE.value.show(false);
			codeEditor.value.show(false);
			isFullScreen.value=false;
			isLoading.value=true;
			loadingMessage.value=e.args.message
		 });
		 
		 cloudRender.call("OnRenderConnected",(e)=>{
			console.log("%c[OnRenderConnected]", "background: lightgreen; color: black", e);
			apiNavForUE.value.show(true);
			isLoading.value=false;
			
			initCompleted();
			
		 });
		 
		 // cloudRender.call("OnRenderClosed",(e)=>{
			// console.log("%c[OnRenderClosed]", "background: yellow; color: black", e);
			// apiNavForUE.value.show(false);
			// codeEditor.value.show(false);
			// isFullScreen.value=false;
			// isLoading.value=true;
			// loadingMessage.value=e.args.message
		 // });
		 
		 // cloudRender.call("OnRenderFailed",(e)=>{
			//  console.log("%c[OnRenderFailed]", "background: lightred; color: black", e);
			//  apiNavForUE.value.show(false);
			//  codeEditor.value.show(false);
			//  isFullScreen.value=false;
			//  isLoading.value=true;
			//  loadingMessage.value=e.args.message
		 // });
		
		 cloudRender.call("StartRenderCloud", {
        "appId": "1",
        "url": "ws://127.0.0.1:8881/51745167",
        "eio": "51745167"
		 });
		//initCompleted(cloudRender);
		//
		//apiNavForUE.value.show(true);
		//codeEditor.value.show(true);
	});
	
	
	
	onDeactivated(()=>{
		console.log('onDeactivated');
	})
	
	onBeforeUnmount(()=>{
		console.log('onBeforeUnmount');
	})
	onUnmounted(()=>{
		console.log('onUnmounted');
	})
	
	onActivated(()=>{
		console.log('onActivated');
	})
	onErrorCaptured(()=>{
		console.log('onErrorCaptured');
	})
	
</script>

<style scoped>
	
	.editor-shrink-btn{
		position: absolute;
		z-index: 99;
		right: 0;
		padding-top: 8px;
		padding-right: 10px;
	}
	.shrink-btn{
		width: 60px;
		height: 28px;
		background: #0ba0ff url() no-repeat center center/18px;
		cursor:pointer;
	}
	.shrink-btn:hover{
		background-color: #25aeab;
	}
	.shrink-btn.active{
		background-image:url() ;
	}
	
	.loadingOverlay{
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 999;
		background-color: rgba(0,0,0,0.2);
		vertical-align: middle;
		> span{
			font-size: 1.25rem;
			position: fixed;
		  /* 水平垂直居中 */
		  top: 50%;
		  margin-top: -150px;
		  left: 50%;
		  margin-left: -150px;
		}
	}
	
</style>
